<script setup lang="ts">
import type { LocalProjectItem } from "@common/local-project.types.ts";
import type { IDENames, LocalIdeItem } from "@/store/ide/types.ts";
import { computed, h, shallowRef } from "vue";
import { hci, imgIcon } from "@/components/framework/icon";
import path from "@/framework/util/path.ts";
import { hc } from "@/framework/vue/util/render.ts";
import { FolderOpenFilled } from "@ant-design/icons-vue";
import { ProjectIcons } from "@/modules/local-project/config.ts";
import type { ItemType } from "ant-design-vue";
import { getContextMenu } from "@/modules/local-project/project-item.service.ts";

const { project, ides } = defineProps<{
  project: LocalProjectItem;
  ides: Partial<Record<IDENames, LocalIdeItem[]>>;
}>();

const projectName = computed(() => path.basename(project.title));
const suppotedIdeNames = computed<IDENames[]>((): IDENames[] => {
  switch (project.type) {
    case "nodejs":
      return ["phpstorm", "pycharm", "idea", "vscode", "webstorm"];
    case "android":
      return ["vscode", "idea", "androidStudio"];
    case "flutter":
      return ["vscode", "idea", "androidStudio"];
    case "java":
      return ["vscode", "idea"];
    case "python":
      return ["idea", "vscode", "pycharm"];
    case "dotnet":
      return ["vscode", "vs", "rider"];
    case "rust":
      return ["idea", "rustover"];
    case "go":
      return ["idea", "vscode", "goland"];
    case "php":
      return ["idea", "vscode", "phpstorm"];
    default:
      return ["vscode"];
  }
});

const availableIde = computed<LocalIdeItem[][]>(() => suppotedIdeNames.value.filter(it => ides[it] && ides[it]?.length > 0).map(it => ides[it]!));

const openProject = (ide: LocalIdeItem) => {
  let ppath = project.path;
  if (project.type === "dotnet" && ide.key === "vscode") {
    ppath = path.dirname(ppath);
  }

  native.cp.execFile(ide.launchCmd, [ppath]);
};

const openInExplorer = () => {
  if (project.type === "dotnet") {
    native.shell.openPath(path.dirname(project.path));
    return;
  }
  native.shell.openPath(project.path);
};

const contextMenus = shallowRef<ItemType[]>([]);
const loadContextMenu = async () => {
  const items: ItemType[] = [
    {
      key: "project-name",
      disabled: true,
      label: h("b", { class: "color-text-secondary" }, projectName.value),
      icon: hci(ProjectIcons[project.type!]),
    },
    { type: "divider" },
    {
      key: "open-in-explorer",
      label: "在资源管理器中打开",
      icon: hc(FolderOpenFilled, { style: "color:#FFCB40" }),
      onClick: openInExplorer,
    },
  ];

  const projectItems = await getContextMenu(project);
  items.push(...projectItems);
  contextMenus.value = items;
};
</script>

<template>
  <a-dropdown :trigger="['contextmenu']">
    <b class="flex-1 h-full iflex aic" @contextmenu="loadContextMenu">{{ project.title }}</b>
    <template #overlay>
      <a-menu :items="contextMenus" />
    </template>
  </a-dropdown>
  <a-space>
    <template v-for="it in availableIde">
      <template v-if="it.length === 1">
        <a-tooltip :title="it[0].name" :mouse-leave-delay="0" placement="top">
          <a-button type="text" :icon="imgIcon(it[0].icon, 18)" shape="circle" @click="openProject(it[0])" />
        </a-tooltip>
      </template>
      <template v-else>
        <a-dropdown>
          <a-tooltip :title="it[0].name" :mouse-leave-delay="0" placement="top">
            <a-button type="text" :icon="imgIcon(it[0].icon, 18)" shape="circle" @click="openProject(it[0])" />
          </a-tooltip>
          <template #overlay>
            <a-menu>
              <a-menu-item v-for="v in it" :key="v.key" :icon="imgIcon(v.icon)">{{ v.name }}</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </template>
    </template>
  </a-space>
</template>

<style lang="less">
.project-buttons {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
</style>
